<template>
  <view class="page">
    <!-- 如果是小程序才显示顶部导航 -->
    <!-- #ifdef MP-WEIXIN -->
    <CommonNavbar bgColor="#FFFEFA" :autoBack="false"></CommonNavbar>
    <!-- #endif -->

    <view class="main padding-lr-sm" v-show="(state.childrenList.length || state.classList.length) && state.reportData">
      <!-- 头部用户信息 -->
      <view class="flex align-center justify-between" :class="systemInfo.platform === 'android' ? 'margin-top-lg' : ''">
        <!-- 老师 -->
        <view v-if="state.userInfo.userIdentity == 1">
          <up-text color="black" size="16" :text="'班级：' + state.currentInfo.className"
            @click="state.showClassPicker = true"></up-text>
        </view>
        <!-- 家长 -->
        <view class="flex flex-1" v-if="state.userInfo.userIdentity == 2">
          <up-avatar size="32" :src="`${IMAGE_URL}${state.currentInfo.sex == 1
            ? '/profile/content/2025/04/28/kMTk1KgLHBdoc948cab5bf14490df9d142be00d82eb2_20250428141815A002.png'
            : '/profile/content/2025/04/28/n6eVNhK19FSQ0889c47942285ae807a2959e9c7c92e1_20250428141907A004.png'
            }`"></up-avatar>
          <up-text color="black" size="16" :text="'姓名：' + state.currentInfo.nickname"
            @click="state.showClassPicker = true" margin="0 0 0 20rpx"></up-text>
        </view>

        <view>
          <up-button text="新建日报" size="mini" type="primary"
            customStyle="width:112rpx !important;height:50rpx !important" @click="createReport"></up-button>
        </view>
      </view>
      <!-- 有报告数据时显示 -->
      <template>
        <!-- <view class="margin-top">
          <up-text size="36rpx" text="开心积极" align="center"></up-text>
        </view> -->

        <!-- 标题 -->
        <view class="margin-top">
          <up-text size="56rpx" color="#3D511D" text="标题：考试周记录" align="center" weight="500"></up-text>
          <view class="flex align-center margin-top-sm justify-center">
            <up-text prefixIcon="clock" size="24rpx" color="#B7B7B7" :text="dayjs().format('YYYY-MM-DD dddd')"
              align="right" margin="0 0 0 30rpx" iconStyle="margin:0 10rpx;margin-top:4rpx;color:#666666"></up-text>
            <up-text prefixIcon="clock" size="24rpx" color="#B7B7B7" :text="`时间：${dayjs().format('HH:mm')}`"
              align="left" iconStyle="margin:0 10rpx 0 40rpx;margin-top:4rpx;color:#666666"></up-text>
          </view>
        </view>

        <view class="echarts-box">
          <!-- 八维图 -->
          <view class="chart-box padding-lr-sm">
            <up-text size="36rpx" color="#3D511D" text="八维图" weight="400" align="center"></up-text>

            <view class="white-box margin-top-sm">
              <view style="width: 100vw; height: 550rpx">
                <l-echart ref="chartRef"></l-echart>
              </view>
            </view>
          </view>
          <!-- 发展建议 -->
          <view class="chart-box padding-lr-sm">
            <up-text size="36rpx" color="#3D511D" text="发展建议" margin="12px 0 0 0" weight="400" align="center"></up-text>
            <!-- v-for="(item, index) in state.suggestionData" :key="index" -->
            <view class="white-box margin-top-sm">
              <!--<view class="flex justify-between padding-lr">
                <up-text :text="item.title" size="24rpx" color="#333" weight="400"></up-text>
                <view :class="item.score === '高' ? 'orange-year' : 'green-year'"> {{ item.score }} </view>
              </view>
              <up-divider></up-divider>-->
              <view class="padding-lr">
                <!-- <up-text :text="item.content[Math.random(2)]" size="28rpx" color="#666" weight="400"></up-text> -->
                <up-text :text="state.suggestionData[Math.floor(Math.random() * (state.suggestionData.length))]"
                  size="28rpx" color="#666" weight="400"></up-text>
              </view>
            </view>
          </view>
        </view>
      </template>
      <!-- 没有报告数据时显示 -->
      <!-- <view style="margin-top: 10vh" v-show="!state.reportData">
        <up-empty mode="data" text="暂无信息" iconSize="200rpx" icon="/static/images/icon-empty.png">
        </up-empty>
        <view style="margin-top: 200rpx">
          <up-button type="primary" text="新建日报" shape="circle" @click="createReport"></up-button>
        </view>
      </view> -->

      <!-- 班级选择器 -->
      <up-picker :show="state.userInfo.userIdentity == 1 && state.showClassPicker" :columns="[state.classList]"
        keyName="className" @cancel="state.showClassPicker = false" @confirm="confirmClass"></up-picker>
      <!-- 孩子选择器 -->
      <up-picker :show="state.userInfo.userIdentity == 2 && state.showClassPicker" :columns="[state.childrenList]"
        keyName="nickname" @cancel="state.showClassPicker = false" @confirm="confirmClass"></up-picker>
    </view>
    <view class="main flex flex-direction align-center justify-center"
      v-if="!state.childrenList.length && !state.classList.length && !state.reportData">
      <up-empty mode="data" text="暂无信息" iconSize="200rpx" icon="/static/images/icon-empty.png">
      </up-empty>
      <view style="margin-top: 200rpx">
        <!-- 老师 -->
        <up-button type="primary" text="新建班级" shape="circle" @click="createClass"
          v-if="state.userInfo.userIdentity == 1"></up-button>
        <!-- 家长 -->
        <up-button type="primary" text="新建日报" shape="circle" @click="createReport"
          v-if="state.userInfo.userIdentity == 2"></up-button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { reactive, ref, getCurrentInstance, nextTick, watch } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { getUserInfo } from '@/utils/auth';
import { studentListApi, getReportDataApi } from '@/api/me';
import { getClassListApi } from '@/api/classes';
import * as echarts from 'echarts';
import { IMAGE_URL } from '@/utils/env';
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'
dayjs.locale('zh-cn'); // 设置中文
const { appContext } = getCurrentInstance();
const systemInfo = appContext.config.globalProperties.$systemInfo;
const chartRef = ref(null);
const state = reactive({
  showClassPicker: false, //班级选择器
  selectSubject: false, //科目弹窗
  currSubject: 0, //选择的科目
  studentInfo: {}, //学生信息
  userInfo: {},
  childrenList: [],
  classList: [], //班级列表
  currentInfo: '', //当前选中的学生或班级
  reportData: null, //日报数据
  // suggestionData: [{//发展建议数据
  //   title: '自主决策力',
  //   content: '建议：选《三只小猪》（应对大灰狼的挫折 ）、《小黑鱼》（团队克服困境 ）等绘本，读完讨论 “角色怎么面对挫折，你学到啥” ，借故事场景进行隐性抗挫教育，符合儿童认知发展特点，用故事疗愈和启发 。',
  //   score: '低'
  // }, {
  //   title: '情绪管理',
  //   content: '建议：选《三只小猪》（应对大灰狼的挫折 ）、《小黑鱼》（团队克服困境 ）等绘本，读完讨论 “角色怎么面对挫折，你学到啥” ，借故事场景进行隐性抗挫教育，符合儿童认知发展特点，用故事疗愈和启发 。',
  //   score: '高'
  // }, {
  //   title: '规则遵守',
  //   content: '建议：选《三只小猪》（应对大灰狼的挫折 ）、《小黑鱼》（团队克服困境 ）等绘本，读完讨论 “角色怎么面对挫折，你学到啥” ，借故事场景进行隐性抗挫教育，符合儿童认知发展特点，用故事疗愈和启发 。',
  //   score: '中'
  // }]
  suggestionData: [
    '家长怎么做：\r\n别总追求 “完美计划”，每周留一天 “无安排日”，允许孩子自由折腾，自己也学着接受 “不完美”。偶尔和孩子聊聊自己的 “失败故事”，比如 “我当年工作也搞砸过，后来发现……”，让孩子知道犯错是成长的一部分。\r\n孩子怎么做：\r\n每月试一次 “反规则小实验”，比如故意晚睡一小时，事后和家长一起分析 “这样做的好处和问题”。参与一些公益活动，比如去孤儿院做义工，学会从 “高效社交” 中抽离，感受纯粹的情感互动。\r\n总结：\r\n别只盯着 “优秀”，偶尔制造点 “混乱”，培养孩子的抗挫力，让优势变成长久的成长动力。',
    '家长怎么做：\r\n每月设计一个 “小挑战”，比如让孩子自己解决和朋友的矛盾，家长只在旁边观察、事后讨论，不直接插手。孩子难过时，别急着安慰，试试问：“你觉得怎么做能让自己好起来？” 帮他学会自己处理情绪。\r\n孩子怎么做：\r\n用角色扮演模拟 “被误解”“被批评” 的场景，事后看视频分析自己的表情和反应，慢慢习惯压力。每天记录 “小挫折日记”：今天遇到了什么困难，怎么解决的，有什么意外发现？学会把挫折变成 “经验包”。\r\n总结：\r\n别做 “情绪保护伞”，要当 “心理健身房”，让孩子的敏感变成 “预警优势”，而不是 “脆弱源头”。',
    '家长怎么做：\r\n和孩子一起列 “可商量清单”，比如 “作业时间必须固定，但玩多久游戏可以讨论”，明确哪些能谈、哪些不能。用 “代币奖励” 管理行为，比如按时完成作业得 10 分，扣分就取消周末出游，让后果更直观。\r\n孩子怎么做：\r\n试着自己制定一条家庭规则，比如 “垃圾分类细则”，还要说明为什么这样定，培养 “规则思维”。玩《文明》这类策略游戏，体验 “乱定规则” 的后果，明白 “自由” 和 “责任” 是一体的。\r\n总结：\r\n别和孩子 “斗智斗勇”，要一起 “定规矩”，把 “挑战欲” 变成 “创造力”，让规则成为 “共同约定”。']
});

onLoad(async () => {
  state.userInfo = await getUserInfo('userInfo');

  if (state.userInfo.userIdentity == 2) {
    // 如果是父母身份登录，查询关联的孩子列表,默认显示第一个孩子的信息
    getChildrenList();
  } else {
    // 如果是老师身份登录，查询关联的班级列表,默认显示第一个班级的信息
    getClassList();
  }
});
// watch(
//   () => state.reportData,
//   async (newVal) => {
//     if (newVal) {
//       await nextTick(); // 等待 DOM 更新
//       await initRadarChart(); // 确保图表初始化
//     }
//   },
//   { immediate: true } // 立即触发一次
// );
// 家长——>孩子列表
const getChildrenList = async () => {
  const result = await studentListApi();
  if (result.code === 200) {
    state.currentInfo = result.data[0];
    state.childrenList = result.data;
    getReportData();
  } else {
    // uni.$u.toast(result.msg);
  }
};
// 老师——>班级列表
const getClassList = async () => {
  const result = await getClassListApi();
  if (result.code === 200) {
    state.currentInfo = result.data[0];
    state.classList = result.data;
    getReportData();
  } else {
    // uni.$u.toast(result.msg);
  }
};

const getReportData = async () => {
  console.log(state.currentInfo)
  uni.showLoading({ title: '加载中' });
  const params = {
    inputs: {
      input: "过度依赖手机/游戏",
      user_profile: " {\n\"家长自主支持度\": 2.1,\n\"情感回应质量\": 1.2,\n\"规则建构有效性\": 1.8,\n\"生活赋能指数\": 1.3,\n\"学习引导模式\": 1.5,\n\"孩子自主性表现\": 1.4,\n\"情绪管理能力\": 1.7,\n\"社会适应引导\": 1.6\n}"
    },
    // response_mode: "blocking",
    user: state.currentInfo.sId,//"user_identifier"
  }
  const result = await getReportDataApi(params);

  if (result.code === 200) {
    const output = result.data?.data?.outputs?.output;
    const jsonStr = output.replace(/```json|```/g, '').trim();
    // 3. 解析成JSON对象  
    const jsonObj = JSON.parse(jsonStr);
    state.reportData = Object.entries(jsonObj.adjusted_scores).map(([key, value]) => ({ name: key, value }));
    console.log('report data', state.reportData)
    await initRadarChart(); // 确保图表初始化
    uni.hideLoading();
  } else {
    uni.hideLoading();
  }
};

// 初始化雷达图
const initRadarChart = async () => {
  if (!chartRef.value) return;
  const myChart = await chartRef.value.init(echarts);

  let indicatorData = [], randomNumbers = [];
  state.reportData.forEach((item, index) => {
    indicatorData.push({ name: item.name, max: 5 });
    randomNumbers.push(item.value);
  });
  const option = {
    legend: {
      data: ['分数'],
      bottom: '0%',
      left: '30%',
      itemWidth: 10, // 可以根据需要调整大小
      itemHeight: 10, // 确保宽高相等以形成圆形
      itemStyle: {
        borderRadius: 30 // 设置圆角以形成圆形效果
      },
      tooltip: {
        show: true
      },
      textStyle: {
        fontSize: 14
      }
    },
    grid: {
      left: 0,
      right: 0,
      top: '2%',
      bottom: 0
    },
    radar: {
      radius: '70%',
      center: ['45%', '50%'],
      indicator: indicatorData,
      name: {
        textStyle: {
          color: '#20280F',
          fontSize: 14
        },
        formatter: function (name) {
          // 将长字符串按一定字符数拆分成多行
          const maxCharsPerLine = 4; // 每行最多字符数
          const regex = new RegExp(`.{1,${maxCharsPerLine}}`, 'g');
          return name.match(regex).join('\n');
        }
      }
    },
    series: [
      {
        name: '八维图',
        type: 'radar',
        data: [
          // {
          //   value: randomNumbers,// [3.2, 4.2, 3.2, 3.0, 3.4],
          //   name: '昨日',
          //   lineStyle: {
          //     color: '#FF950C' // 设置线条颜色为蓝色
          //   },
          //   itemStyle: {
          //     show: false,
          //     color: '#FF950C' // 数据点颜色
          //   },
          //   areaStyle: {
          //     color: 'rgba(255, 228, 193, 0.41)' // 设置区域背景色，带透明度
          //   }
          // },
          {
            value: randomNumbers,//[2.8, 5, 5, 5, 5],
            name: '今日',
            lineStyle: {
              color: '#FF950C',//'#6D9319'
            },
            itemStyle: {
              show: false,
              color: '#FF950C' // 数据点颜色
            },
            areaStyle: {
              color: 'rgba(255, 228, 193, 0.41)',// 'rgba(109, 147, 25, 0.35)' // 设置区域背景色，带透明度
            }
          }
        ]
      }
    ]
  };

  myChart.setOption(option);
};
// 选择班级
const confirmClass = (item) => {
  state.currentInfo = item.value[0];
  state.showClassPicker = false;
  getReportData();
};
//创建班级
const createClass = () => {
  uni.navigateTo({
    url: '/pages-sub/teacher/createClass'
  });
};
//去填写日报
const createReport = () => {
  const id = state.userInfo.userIdentity == 1 ? state.currentInfo.classId : state.currentInfo.sId;
  if (!id) {
    uni.showToast({
      title: '请先选择班级或学生',
      icon: 'none'
    })
  }
  uni.navigateTo({
    url: '/pages-sub/report/create?id=' + id
  });
};

</script>

<style lang="scss" scoped>
.page {
  background: #fffefa;
}

.echarts-box {
  background: linear-gradient(96.96deg,
      rgba(212, 233, 162, 0.4) 0%,
      rgba(184, 211, 122, 0.32) 18.41%,
      rgba(210, 233, 158, 0.36) 42.07%,
      rgba(201, 236, 124, 0.36) 67.49%,
      rgba(233, 255, 184, 0.4) 85.9%);
  border: solid 1px #e9ecef;
  border-radius: 50rpx;
  margin-top: 32rpx;
  padding: 30rpx 0;
}

.white-box {
  background: #fff;
  border-radius: 50rpx;
  padding: 30rpx 0;
  width: 100%;
}

.green-year,
.orange-year {
  font-size: 24rpx;
  font-weight: 400;
  border-radius: 8rpx;
  padding: 0 20rpx;
  height: 50rpx;
  line-height: 50rpx;
}

.green-year {
  border: solid 1px rgba(109, 147, 25, 0.41);
  background: rgba(109, 147, 25, 0.12);
  color: rgba(125, 160, 47, 1);
}

.orange-year {
  border: solid 1px rgba(255, 149, 12, 1);
  background: rgba(253, 176, 75, 0.22);
  color: rgba(239, 155, 37, 1);
}

.review-item {
  margin: 0 30rpx 40rpx 30rpx;
  background: #f3f3f3;
  padding: 20rpx 24rpx;
  border-radius: 12rpx;

  &:first-child {
    margin-top: 20rpx;
  }
}

.class-item {
  background: #f3f3f3;
  width: 15%;
  color: #000;
  font-size: 28rpx;
  text-align: center;
  padding: 20rpx 0;

  &:not(:first-child) {
    margin-left: 20rpx;
  }

  &.active {
    background: #7da02f;
    color: white;
  }
}
</style>
